<template>
  <view class="upload_file">
    <view v-if="uploadFileType === 'img'" class="need_style">
      <view class="flr fla">
        <view class="common_form_label_style">{{ title }}</view>
        <text class="img_desc_label">仅限jpg、png格式，最多上传{{ limit }}张</text>
      </view>
      <view class="img_desc">
        <uni-file-picker @select="selectImgFile" @delete="delFile" v-model="fileList" disable :auto-upload="false" :limit="limit" mode="grid">
          <view class="flc flcv">
            <img src="/static/img/global/upload_img.png" class="bg_img" />
            <text class="bg_label">上传图片</text>
          </view>
        </uni-file-picker>
      </view>
    </view>
    <view v-else-if="uploadFileType === 'file'" class="need_style flr fla">
      <view class="common_form_label_style">文件</view>
      <view class="file-input flex1">
        <input type="text" readonly disabled v-model="fileObj.fileName" placeholder="只能上传1份，需小于10mb" placeholder-style="font-size: 12rem;font-weight: 400;color: 'rgba(166, 166, 166, 1)';text-align: left;" />
        <view class="upload_inner_btn_label" @click="selectFile">上传文件</view>
      </view>
    </view>
  </view>
</template>
<script>
const api = require('@/utils/request.js');
export default {
  name: 'upload-file',
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    picsUrl: {
      type: String,
      default: ''
    },
    fileName: {
      type: String,
      default: '图片'
    },
    title: {
      type: String,
      default: ''
    },
    fileUrl: {
      type: String,
      default: ''
    },
    uploadFileType: {
      type: String,
      default: ''
    },
    limit: {
      type: Number,
      default: 1
    }
  },
  watch: {
    picsUrl(newVal, oldVal) {
      console.log('picsUrl', newVal, oldVal);
      this.fileList = newVal.split(',').map(el => {
        return {
          name: 'file' + this.id++,
          extname: 'png',
          url: el
        };
      });
    },
    fileUrl(url) {
      this.fileObj.url = url;
    },
    fileName(fileName) {
      this.fileObj.fileName = fileName;
    }
  },
  data() {
    return {
      id: 0,
      fileObj: {
        fileName: '',
        url: ''
      },
      fileList: []
    };
  },
  methods: {
    // 选取图片
    selectImgFile(e) {
      let t = this;
      const tempFilePaths = e.tempFiles;
      tempFilePaths.forEach(async element => {
        api.uploadFile(element).then(resp => {
          t.fileList.push({
            name: resp.data.fileName,
            extname: 'png',
            url: resp.data.url
          });
          t.$emit('setFileInfo', t.fileList.map(el => el.url).join(','));
          console.log(t.fileList.map(el => el.url).join(','));
        });
      });
    },
    async selectFile(e) {
      let t = this;
      wx.chooseMessageFile({
        count: 1,
        type: 'all',
        success: async res => {
          const tempFilePaths = res.tempFiles;
          api.uploadFile(tempFilePaths[0]).then(resp => {
            t.fileObj = { fileUrl: resp.data.url, fileName: tempFilePaths[0].name };
            console.log('fileObj', t.fileObj);
            t.$emit('setFileInfo', t.fileObj);
          });
        },
        fail: function (error) {
          console.error('读取文件流失败：', error);
        }
      });
    },
    delFile(e) {
      if (this.fileList.length === 1) {
        this.fileList = [];
      } else {
        this.fileList.splice(e.index, 1);
      }
      this.$forceUpdate();
      this.$emit('setFileInfo', this.fileList.map(el => el.url).join(','));
    }
  }
};
</script>

<style lang="scss" scoped>
.file-input {
  position: relative;
  .upload_inner_btn_label {
    position: absolute;
    top: 4rem;
    right: 10rem;
    height: 19rem;
    width: 50rem;
    line-height: 19rem;
    border-radius: 3rem;
    background: linear-gradient(180deg, rgba(166, 166, 166, 1) 0%, rgba(230, 230, 230, 1) 100%);
    font-size: 10rem !important;
    color: rgba(56, 56, 56, 1);
    text-align: center;
  }
  input {
    padding: 0 10rem;
    height: 26rem;
    border-radius: 2rem;
    border: 0.5rem solid rgba(229, 229, 229, 1);
  }
}
.need_style {
  width: 402rem;
  padding: 0 14rem 10rem 14rem;

  .img_desc_label {
    font-size: 12rem;
    font-weight: 400;
    color: rgba(166, 166, 166, 1);
    padding-left: 6rem;
  }
  .bg_img {
    margin-bottom: 5rem;
    width: 41rem;
    height: 36rem;
  }
  .bg_label {
    font-size: 14rem;
    font-weight: 400;
    line-height: 20rem;
    color: rgba(128, 128, 128, 1);
  }
  .upload_input {
    width: 316rem;
    padding: 0 10rem;
    height: 26rem;
    opacity: 1;
    border-radius: 2rem;
    border: 0.6rem solid rgba(229, 229, 229, 1);
    text {
      font-size: 10rem;
      font-weight: 400;
      color: rgba(166, 166, 166, 1);
      text-align: left;
    }
  }
}
// 通用表单文字样式
.common_form_label_style {
  font-size: 16rem;
  line-height: 45rem;
  padding-right: 10rem;
  color: rgba(56, 56, 56, 1);
}
</style>
